<template>
  <div class="data-v-summary" :class="{ w400: type == 9 }">
    <div class="image">
      <img :src="imgSrc" alt="pic" />
    </div>

    <div class="number2" v-if="type == 9 || type == 10">
      <div class="name">{{ name }}</div>
      <div class="value" style="margin-left: 15px" :style="valueStyle">
        {{ formattedValue }}
      </div>
    </div>
    <div class="number" v-else>
      <div class="value" :style="valueStyle">{{ formattedValue }}</div>
      <div class="name">{{ name }}</div>
    </div>
  </div>
</template>

<script>
import { formatNum } from "../utils";

import pic1 from "./img/pic1.png";
import pic2 from "./img/pic2.png";
import pic3 from "./img/pic3.png";
import pic4 from "./img/pic4.png";
import pic5 from "./img/pic5.png";
import pic6 from "./img/pic6.png";
import pic7 from "./img/pic7.png";
import pic8 from "./img/pic8.png";
import pic9 from "./img/pic9.png";
import pic10 from "./img/pic10.png";
import pic11 from "./img/pic11.png";
import pic12 from "./img/pic12.png";
import pic13 from "./img/pic13.png";
import pic14 from "./img/pic14.png";
import pic15 from "./img/pic15.png";
import pic16 from "./img/pic16.png";
import pic17 from "./img/pic17.png";
import pic18 from "./img/pic18.png";

export default {
  name: "data-v-summary",
  props: {
    value: {
      type: [String, Number],
      default: 0
    },
    name: {
      type: String,
      default: "默认数据名称"
    },
    type: {
      type: [String, Number],
      default: 1,
      validator: function(value){
        return value <= 18;
      }
    },
    color: {
      type: String,
      default: "#fff"
    }
  },
  computed: {
    formattedValue() {
      return formatNum(this.value);
    },
    imgSrc() {
      let imgs = [
        pic1,
        pic2,
        pic3,
        pic4,
        pic5,
        pic6,
        pic7,
        pic8,
        pic9,
        pic10,
        pic11,
        pic12,
        pic13,
        pic14,
        pic15,
        pic16,
        pic17,
        pic18,
      ];
      return imgs[this.type - 1] || pic1;
    },
    valueStyle() {
      return {
        color: this.color
      };
    }
  },
  mounted() {},

  methods: {}
};
</script>
<style lang="less">
.data-v-summary {
  height: 80px;
  display: flex;
  align-items: center;
  position: relative;
  .image {
    // width: 78px;
    // height: 78px;
    display: flex;
    align-items: center;
    & > img {
      width: 100%;
      height: auto !important;
    }
  }
  .number {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 0;
    margin-left: 15px;
  }
  .number2 {
    display: flex;
    align-items: center;

    position: absolute;
    left: 75px;
    flex: 0 1 320px;
    flex-direction: row;
    width: 320px;
  }
  .value {
    color: rgba(255, 255, 255, 1);
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
    // font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .name {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
  }
}
.w400 {
  width: 400px !important;
}
</style>
